<!doctype html>
<html>
<head>
  <title>测试</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  <meta http-equiv="Expires" content="0" />
</head>

<body>
<button id="btn">运行</button>
<button id="rClick">销毁</button>
<iframe id="iframe1" class="iframe" src="http://localhost:8080/patrol" scrolling="no" frameborder="0" width="900" height="600"></iframe>
</body>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script src="./static/js/jsencrypt.min.js"></script>
<script src="./static/js/web-control_1.2.5.min.js"></script>
<script type="text/javascript">
  // 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
  var btnClick = document.getElementById("btn")
  var rClick = document.getElementById("rClick")
  var iframeWin = document.getElementById("iframe1");
  {

    iframeWin.onload = function(){
      iframeWin.contentWindow.postMessage({
        action:'sendTitle',   // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
        msg: '将标题发给子页面',
        info: document.title
      }, '\*');
      iframeWin.contentWindow.postMessage({
        action:'updateInitParam',    // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
        msg: '更新子页面一些初始值',
        showSize: {                       // 浏览器视窗高度与宽度
          width: iframeWin.clientWidth,
          height: iframeWin.clientHeight
        },
        iframeOffset: {                   // iframe偏离文档的位置
          left: iframeWin.offsetLeft,
          top: iframeWin.offsetTop
        },
        iframeClientPos: {	            // iframe相对视窗的位置
          left: iframeWin.getBoundingClientRect().left,
          right: iframeWin.getBoundingClientRect().right,
          top: iframeWin.getBoundingClientRect().top,
          bottom: iframeWin.getBoundingClientRect().bottom
        }
      }, '\*');

    }


  }

  btnClick.addEventListener("click", function() {
    // 处理函数
    iframeWin.contentWindow.postMessage({
      action:'updateCode',
      msg: '将code传给子页面',
      code:['34030300001310549008@03403030000','34030300001310549004@03403030000','34030300001310549002@03403030000','34030300001310549008@03403030000','34030300001310549004@03403030000','34030300001310549002@03403030000','34030300001310549008@03403030000','34030300001310549004@03403030000','34030300001310549002@03403030000']
    }, '\*'); // 使用Vue页面的URL
  });

  rClick.addEventListener("click", function() {
    // 处理函数
    iframeWin.contentWindow.postMessage({
      action:'destruction',
      msg: '销毁页面',
      implement:true    }, '\*');
  });





</script>

<style>
  .iframe{
    position: fixed;
    left: 100px;
    top: 200px;
  }
</style>
</html>
